<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>点击切换图片</title>
		<!-- 脚本 -->
		<script>
			// 执行这里的代码时，下面的所有标签存在吗
			document.write('<p>123</p>')
			function showCat() {
				// 修改图片地址为猫的图片
				var obj = document.getElementById('animal')
				obj.src = 'img/cat.jpg'
			}
			function showDog() {
				// 修改图片地址为狗的图片
				var obj = document.getElementById('animal')
				obj.src = 'img/dog.jpg'
			}
		</script>
	</head>
	<body>
		<button onclick="showCat()">显示猫</button>
		<button onclick="showDog()">显示狗</button>
		<br/>
		<!-- 写代码修改src->JavaScript中的DOM -->
		<img id="animal" style="width: 400px;" src="img/cat.jpg"/>
	</body>
	<script>
		var obj = document.getElementById('animal')
		// console.log(obj.src) // 存在了
		obj.src = 'img/dog.jpg'
	</script>
</html>